import { forwardRef, useImperativeHandle, useState } from "react";
import { Modal } from "antd";

// 模态框props
interface ProModalProps {
	title?: string; // 标题
	onOk?: () => void; // 确定回调
	onCancel?: () => void; // 取消回调
	children?: React.ReactNode; // 内容
	footer?: React.ReactNode; // 底部
	zIndex?: number;
}

// 模态框暴露给父组件的方法
interface ProModalRef {
	openModal?: () => void;
	closeModal?: () => void;
	open?: boolean;
}

export const ProModal = forwardRef<ProModalRef, ProModalProps>((props, ref) => {
	// 暴露给父组件的方法
	useImperativeHandle(ref, () => ({
		openModal,
		closeModal,
		open,
	}));
	// 模态框状态
	const [open, setOpen] = useState(false);
	// 打开模态框
	const openModal = () => {
		setOpen(true);
	};
	// 关闭模态框
	const closeModal = () => {
		setOpen(false);
	};
	return (
		<div>
			<Modal
				title={props?.title}
				open={open}
				onOk={props?.onOk}
				zIndex={props?.zIndex ?? 100000}
				footer={props?.footer ?? null}
				onCancel={props?.onCancel ?? closeModal}
			>
				{props?.children}
			</Modal>
		</div>
	);
});
